<!-- 专属指标同步弹出层 -->
<template>
	<div class="indicator-sync-container">
		<el-dialog title="专属指标同步" v-model="open" fullscreen :close-on-click-modal="false" append-to-body center @closed="closedEvent">
			<!-- 搜索表单 -->

			<el-form :model="searchFormData" v-loading="operaLoading" :inline="true" :label-width="100">
				<el-form-item label="同步类型" prop="syncType">
					<el-select v-model="searchFormData.syncType" @change="syncTypeItemClick">
						<el-option v-for="(option, i) in options.syncType" :key="'option_' + i" :label="option.label" :value="option.value"> </el-option>
					</el-select>
					<!-- <yd-select
						v-model="searchFormData.syncType"
						:config="{
							placeholder: '请选择同步类型',
							data: options.syncType,
							selectFirst: true,
							selectKey: 'value',
							allOption: false,
							multiple: false,
						}"
						@selectValChange="syncTypeItemClick"
					></yd-select> -->
				</el-form-item>
				<el-form-item v-show="showSyncType2Options" label="同步网端" prop="sysSegmentStr">
					<el-select ref="syncSegmentItemRef" v-model="searchFormData.sysSegmentStr" @change="syncSegmentItemClick">
						<el-option v-for="(option, i) in optionsData.syncSegmentItem" :key="'option_' + i" :label="option.label" :value="option.value">
						</el-option>
					</el-select>
					<!-- <yd-select
						ref="syncSegmentItemRef"
						v-model="searchFormData.sysSegmentStr"
						:config="{
							placeholder: '请选择同步网端',
							data: [],
							selectKey: 'code',
							allOption: false,
							multiple: false,
						}"
						@selectValChange="syncSegmentItemClick"
					></yd-select> -->
				</el-form-item>
				<el-form-item v-show="showSyncType3Options" label="同步系统" prop="systemCode">
					<el-select ref="syncSystemItemRef" v-model="searchFormData.systemCode" @change="syncSystemItemClick">
						<el-option v-for="(option, i) in optionsData.syncSystemItem" :key="'option_' + i" :label="option.label" :value="option.value">
						</el-option>
					</el-select>
					<!-- <yd-select
						ref="syncSystemItemRef"
						v-model="searchFormData.systemCode"
						:config="{
							placeholder: '请选择同步系统',
							data: [],
							selectKey: 'code',
							allOption: false,
							multiple: false,
						}"
						@selectValChange="syncSystemItemClick"
					></yd-select> -->
				</el-form-item>
				<el-form-item v-show="showSyncType3Options" label="同步业务" prop="businessCode">
					<el-select ref="syncBusinessItemRef" v-model="searchFormData.businessCode" @change="syncBusinessItemClick">
						<el-option v-for="(option, i) in optionsData.syncBusinessItem" :key="'option_' + i" :label="option.label" :value="option.value">
						</el-option>
					</el-select>
					<!-- <yd-select
						ref="syncBusinessItemRef"
						v-model="searchFormData.businessCode"
						:config="{
							placeholder: '请选择同步业务',
							data: [],
							selectKey: 'code',
							allOption: false,
							multiple: false,
						}"
						@selectValChange="syncBusinessItemClick"
					></yd-select> -->
				</el-form-item>
			</el-form>
			<br />
			<el-row v-loading="operaLoading" :gutter="20">
				<!-- 可同步服务资源 -->
				<el-col :span="12">
					<el-card shadow="hover">
						<template #header>
							<span>可同步服务资源</span>
						</template>
						<el-row>
							<el-col :span="24">
								<el-input v-model="leftFormData.identifyCharacter" placeholder="请输入识别匹配串" size="small" style="width: 50%; margin-right: 10px">
								</el-input>
								<el-button type="primary" size="small" icon="Search" @click="leftQuery(true)">搜索</el-button>
								<el-button size="small" :disabled="multipleLeft" @click="syncIndicator">同步所选项</el-button>
								<el-button size="small" :disabled="leftTableData.data.length <= 0" @click="syncIndicatorAll">同步所有项</el-button>
							</el-col>
						</el-row>
						<yd-table
							:formData="leftFormData"
							:tableConfig="leftTableConfig"
							:tableData="leftTableData.data"
							@sizeChangeHandler="leftQuery"
							@currentChangeHandler="leftQuery"
							@sortChangeHandler="leftQuery"
							@selectionChangeHandler="selectSyncResource"
						>
						</yd-table>
					</el-card>
				</el-col>
				<!-- 已同步服务资源 -->
				<el-col :span="12">
					<el-card shadow="hover">
						<template #header>
							<span>已同步服务资源</span>
						</template>
						<el-row>
							<el-col :span="24">
								<el-input
									v-model="rightFormData.identifyCharacter"
									placeholder="请输入识别匹配串"
									size="small"
									style="width: 50%; margin-right: 10px"
								>
								</el-input>
								<el-button type="primary" size="small" icon="Search" @click="rightQuery(true)">搜索</el-button>
								<el-button size="small" :disabled="multipleRight" @click="unSyncIndicator">移除所选项</el-button>
								<el-button size="small" :disabled="rightTableData.data?.length <= 0" @click="unSyncIndicatorAll">移除所有项</el-button>
							</el-col>
						</el-row>
						<yd-table
							:formData="rightFormData"
							:tableConfig="rightTableConfig"
							:tableData="rightTableData.data"
							@sizeChangeHandler="rightQuery"
							@currentChangeHandler="rightQuery"
							@sortChangeHandler="rightQuery"
							@selectionChangeHandler="selectUnSyncResource"
						>
						</yd-table>
					</el-card>
				</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>

<script setup name="IndicatorSync" lang="ts">
import {
	queryIndicatorSyncSegmentOptions,
	queryIndicatorSyncSystemOptions,
	queryIndicatorSyncBusinessOptions,
	querySureSyncResource,
	queryAlreadySyncResource,
	sync,
	unSync,
	syncAll,
	unSyncAll,
} from '@/api/management/IndicatorManage/proprietaryIndicatorManage/manage/indicatorSyncDialog';
import { indicatorSyncOptions } from '@/utils/management/commonOptions';
import { onMounted, ref, reactive } from 'vue';
import useCurrentInstance from '@/utils/useCurrentInstance';

const { proxy } = useCurrentInstance();
const emit = defineEmits(['closedEvent']);
const props = defineProps<{
	resource: anyObj;
}>();

// 操作中
const operaLoading = ref(false);
// 非多个禁
const multipleLeft = ref(true);
// 非多个禁用
const multipleRight = ref(true);
// 开启状态
const open = ref(false);
// 选项
let options = reactive(indicatorSyncOptions());

const optionsData = reactive<anyObj>({
	syncSystemItem: [],
	syncSegmentItem: [],
	syncBusinessItem: [],
});
// 是否显示同一网端资源选项
const showSyncType2Options = ref(false);
// 是否显示同一业务资源选项
const showSyncType3Options = ref(false);
// 搜索表单
let searchFormData = reactive<anyObj>({});

searchFormData.syncType = options.syncType[0].value;

// 可同步table搜索表单
let leftFormData = reactive<anyObj>({
	identifyCharacter: '',
	pageSize: 10,
	pageNum: 1,
});
// 可同步列表配置
let leftTableConfig = reactive<TableConfigType>({
	// url: querySureSyncResource,
	columns: [
		{
			label: '服务资源编码',
			prop: 'resourceCoding',
			width: 200,
		},
		{
			label: '服务资源匹配串',
			prop: 'identifyCharacter',
			showOverFlowToolTip: true,
		},
	],
	// 高度
	height: '530px',
	// 开启复选框
	enableSelection: true,
	// 开启分页
	pagination: {
		pageNum: 1,
	},
	// 加载层
	loading: false,
});
// 可同步列表数据
let leftTableData = reactive({
	data: [],
});
// 已同步table搜索表单
let rightFormData = reactive({
	identifyCharacter: '',
	pageSize: 10,
	pageNum: 1,
});
// 已同步列表配置
let rightTableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '服务资源编码',
			prop: 'resourceCoding',
			width: 200,
		},
		{
			label: '服务资源匹配串',
			prop: 'identifyCharacter',
			showOverFlowToolTip: true,
		},
	],
	// 高度
	height: '530px',
	// 开启复选框
	enableSelection: true,
	// 开启分页
	pagination: {
		pageNum: 1,
	},
	// 加载层
	loading: false,
});
// 已同步列表数据
let rightTableData = reactive({
	data: [],
	total: 0,
});
onMounted(() => {
	if (props.resource) {
		searchFormData.resourceCoding = props.resource.resourceCode;
		console.log('----------------', searchFormData.resourceCoding);
	}
});

// 打开界面
function openDialog(indicatorIds: any, resourceCode: any) {
	searchFormData.ids = indicatorIds;
	if (resourceCode) {
		searchFormData.resourceCoding = resourceCode;
	}
	open.value = true;
}
// 点击同步类型
function syncTypeItemClick(v: any) {
	console.log('syncTypeItemClick------------');
	if (v === 'SEGMENT') {
		// 同一网端资源
		//proxy.$refs.syncSegmentItemRef.clearSelected();
		showSyncType2Options.value = true;
		showSyncType3Options.value = false;
		// 查询专属指标同步网端下拉项
		console.log('searchFormData.resourceCoding', searchFormData.resourceCoding);
		queryIndicatorSyncSegmentOptions({
			resourceCoding: searchFormData.resourceCoding,
		}).then((res) => {
			// 设置同步网端选项
			optionsData.syncSegmentItem = res.data;
			// proxy.$refs.syncSegmentItemRef.setOptions(res.data);
		});
	} else if (v === 'BUSINESS') {
		// proxy.$refs.syncSystemItemRef.clearSelected();
		// proxy.$refs.syncBusinessItemRef.clearSelected();
		// 同一业务资源
		showSyncType2Options.value = false;
		showSyncType3Options.value = true;
		// 查询专属指标同步系统下拉项
		console.log('searchFormData.resourceCoding1', searchFormData.resourceCoding);
		queryIndicatorSyncSystemOptions({
			resourceCoding: searchFormData.resourceCoding,
		}).then((res) => {
			// 设置同步系统选项
			optionsData.syncSystemItem = res.data;
			// proxy.$refs.syncSystemItemRef.setOptions(res.data);
		});
	} else {
		// 子资源或父资源
		showSyncType2Options.value = false;
		showSyncType3Options.value = false;
		leftQuery();
		rightQuery();
	}
}
// 点击同步网端
function syncSegmentItemClick(v: any) {
	const arr = v.split(',');
	if (arr.length > 1) {
		searchFormData.systemCode = arr[0];
		searchFormData.segmentId = arr[1];
		leftQuery();
		rightQuery();
	}
}
// 点击同步系统
function syncSystemItemClick(v: any) {
	// proxy.$refs.syncBusinessItemRef.clearSelected();
	// 查询专属指标同步业务下拉项
	queryIndicatorSyncBusinessOptions({
		systemCode: v,
		resourceCoding: searchFormData.resourceCoding,
	}).then((res) => {
		// 设置同步业务选项

		// proxy.$refs.syncBusinessItemRef.setOptions(res.data);
		optionsData.syncBusinessItem = res.data;
	});
}
// 点击同步业务
function syncBusinessItemClick() {
	leftQuery();
	rightQuery();
}
// 可同步列表查询
function leftQuery(resetFlag?: any) {
	if (resetFlag) {
		leftFormData.pageNum = 1;
	}
	leftTableConfig.loading = true;
	querySureSyncResource({
		...searchFormData,
		...leftFormData,
	}).then((res: ApiResponse) => {
		leftTableConfig.loading = false;
		if (res.code !== 0) {
			proxy.$modal.msgError(res.msg);
			return;
		}
		leftTableData.data = res.data.data;
		leftTableConfig.pagination!.total = res.data.total;
	});
}
// 已同步列表查询
function rightQuery(resetFlag?: any) {
	if (resetFlag) {
		rightFormData.pageNum = 1;
	}
	rightTableConfig.loading = true;
	queryAlreadySyncResource({
		...searchFormData,
		...rightFormData,
	}).then((res: ApiResponse) => {
		rightTableConfig.loading = false;
		if (res.code !== 0) {
			proxy.$modal.msgError(res.msg);
			return;
		}
		rightTableData.data = res.data.data;
		rightTableConfig.pagination!.total = res.data.total;
	});
}
// 弹窗关闭回调事件
function closedEvent() {
	emit('closedEvent');
}
// 选择要同步的服务资源
function selectSyncResource(selects: any) {
	multipleLeft.value = !selects.length;
	searchFormData.syncResourceCodeList = selects.map((item: any) => item.resourceCoding);
}
// 选择要移除的服务资源
function selectUnSyncResource(selects: any) {
	multipleRight.value = !selects.length;
	searchFormData.unSyncResourceCodeList = selects.map((item: any) => item.resourceCoding);
}
// 同步所选项
function syncIndicator() {
	operaLoading.value = true;
	sync(searchFormData).then((res) => {
		operaLoading.value = false;
		if (res.code !== 0) {
			proxy.$modal.msgWarning(res.msg);
			return;
		}
		leftQuery(true);
		rightQuery(true);
	});
}
// 同步所有项
function syncIndicatorAll() {
	proxy.$modal
		.confirm('是否确认同步所有项?', '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
		.then(() => {
			operaLoading.value = true;
			// 调用接口
			const d = JSON.parse(JSON.stringify(leftFormData));
			d.pageNum = undefined;
			d.pageSize = undefined;
			return syncAll({
				...searchFormData,
				...d,
			});
		})
		.then(() => {
			operaLoading.value = false;
			// 刷新列表
			leftQuery(true);
			rightQuery(true);
		})
		.catch(function () {});
}
// 移除所选项
function unSyncIndicator() {
	operaLoading.value = true;
	unSync(searchFormData).then((res) => {
		operaLoading.value = false;
		if (res.code !== 0) {
			proxy.$modal.msgWarning(res.msg);
			return;
		}
		leftQuery(true);
		rightQuery(true);
	});
}
// 移除所有项
function unSyncIndicatorAll() {
	proxy.$modal
		.confirm('是否确认移除所有项?', '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
		.then(() => {
			operaLoading.value = true;
			// 调用接口
			const d = JSON.parse(JSON.stringify(rightFormData));
			d.pageNum = undefined;
			d.pageSize = undefined;
			return unSyncAll({
				...searchFormData,
				...d,
			});
		})
		.then(() => {
			operaLoading.value = false;
			// 刷新列表
			leftQuery(true);
			rightQuery(true);
		})
		.catch(function () {});
}
defineExpose({
	openDialog,
});
</script>

<style rel="stylesheet/scss" lang="scss" scoped></style>
